<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>产品管理</title>
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

     
  <!--返回首页的导航  -->  

<a href="../HomeServlet?method=toIndex">返回首页</a>

	<table id="demo" lay-filter="test"></table>
	<!--头部工具栏  -->
	<script type="text/html" id="toolbarDemo1">
       <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
       </div>
    </script>
     <!-- 行内工具栏 -->
     <script type="text/html" id="toolbarDemo2">
       <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
          <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
       </div>
      </script>
<!-- 添加表单 -->

<div id="addDiv" style="display:none;">
     <form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">图片</label>
    <div class="layui-input-inline">
     <button type="button" class="layui-btn" id="test1">
       <i class="layui-icon">&#xe67c;</i>上传图片
      </button>
      <img id="showImg" style="width: 100px" src="">
    <input type="text" name="imgurl" id="Url" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input layui-disabled">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">系列id</label>
    <div class="layui-input-inline">
      <input type="text" name="productid" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">图片名称</label>
    <div class="layui-input-inline">
        <input type="text" name="imgname" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</div>
<!-- 编辑信息 -->
 <div id="complieDiv" style="display:none;">
     <form class="layui-form" action="" lay-filter="updateform"> 
     <div class="layui-form-item">
    <label class="layui-form-label">ID</label>
    <div class="layui-input-inline">
      <input type="text" name="imgid" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input layui-disabled">
    </div>
  </div>
  <form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">图片</label>
    <div class="layui-input-inline">
     <button type="button" class="layui-btn" id="test2">
       <i class="layui-icon">&#xe67c;</i>上传图片
      </button>
      <img id="showImg2" style="width: 100px" src="">
    <input type="text" name="imgurl" id="Url2" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input layui-disabled">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">系列id</label>
    <div class="layui-input-inline">
      <input type="text" name="productid" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">图片名称</label>
    <div class="layui-input-inline">
        <input type="text" name="imgname" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo2">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</div> 
	<script>
layui.use(['table','form','layer','upload'], function(){
  var table = layui.table;
  var form=layui.form;
  var layer=layui.layer;
  var $=layui.$;
  var upload = layui.upload;
 
  //第一个实例
  table.render({
    elem: '#demo'
    ,url: 'ChanPinImgServletadmin?method=getimglist' //数据接口
    ,page: true //开启分页
    ,toolbar:'#toolbarDemo1'
    ,id:"idTest"
    ,cols: [[ //表头
      {field: 'imgid', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'imgurl', title: '图片', width: 180,templet: function(d){
          return '<img src="../'+d.imgurl+'"/>'}}
      ,{field: 'productid', title: '系列', width:180}
      ,{field: 'imgname', title: '名称', width:180}
      ,{field: 'sPrce',title: '操作', toolbar:'#toolbarDemo2',width: 180}
    ]]
  });//表单渲染结束
    
//监听事件,头部监听
  table.on('toolbar(test)', function(obj){
    switch(obj.event){
      case 'add':
    	  layer.open({
    		  type: 1,
    		  area : [ '500px', '600px' ],
    		  content: $('#addDiv') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
    		});
      break;
    };
  });
//监听事件，行内监听
  table.on('tool(test)', function(obj){
     var data=obj.data;
    switch(obj.event){
      case 'delete':
        layer.msg('删除');layer.confirm('真的删除行么', function(index){
            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
            layer.close(index);
            //向服务端发送删除指令
            $.post("ChanPinImgServletadmin?method=deleteproductimg",{"imgid":data.imgid},function(res){
            	layer.msg(res.msg); 吧
            },"json")
          });
      break;
      case 'update':
    	  layer.open({
    		  type: 1,
    		  area : [ '500px', '600px' ],
    		  content: $('#complieDiv') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
    		});
    	  form.val("updateform",data)
   	      $("#showImg2").attr("src","../"+data.imgurl);
      break;
    };
  });
  //监听表单-添加
  form.on('submit(formDemo)', function(data){
	  $.post("ChanPinImgServletadmin?method=insertimg",data.field,function(res){
		  if(res.code==0){
			  layer.msg(res.msg,{time:1000},function(){
				  layer.closeAll();//成功后关闭
				  table.reload('idTest', {});//表格重载
			  })
		  }
		  
	  },"json")
	    return false;
	  });
  //上传图片--添加时上传图片
  //执行实例
  var uploadInst = upload.render({
    elem: '#test1' //绑定元素
    ,url: 'ImgServletAdmin?method=upload' //上传接口
    ,done: function(res){
      //上传完毕回调
      if(res.code==0){
    	  $("#showImg").attr("src","../images/"+res.data);
    	  $("#Url").val("images/"+res.data);
      }
    }
    ,error: function(){
      //请求异常回调
    }
  });
//监听表单-编辑
  form.on('submit(formDemo2)', function(data){
	   
	  $.post("ChanPinImgServletadmin?method=updateproduct",data.field,function(res){
		  if(res.code==0){
			  layer.msg(res.msg,{time:1000},function(){
				  layer.closeAll();//成功后关闭
				  table.reload('idTest', {});//表格重载
			  })
		  }
	  },"json")
	    return false;
	  });
  
    //上传图片--编辑时上传图片
    //执行实例
  var uploadInst = upload.render({
	    elem: '#test2' //绑定元素
	    ,url: 'ImgServletAdmin?method=upload' //上传接口
	    ,done: function(res){
	      //上传完毕回调
	      if(res.code==0){
	    	  $("#showImg2").attr("src","../images/"+res.data);
	    	  $("#Url2").val("images/"+res.data);
	      }
	    }
	    ,error: function(){
	      //请求异常回调
	    }
	  });
      
});//结束
</script>



</body>
</html>